<template>
  <div>
    <div class="tab" v-for="(item,index) in tabs" :key="index" @click="go(item.path)">{{item.title }}<span style="margin-left:10px" @click="removeTab(item.title)">&times;</span></div>
  </div>
</template>

<script lang='ts' setup>
import { defineProps } from "vue";
import { RouteMeta,useRouter } from "vue-router";
import useTabStore from '@/store/tabs'
defineProps<{ tabs: Array<RouteMeta> }>();
const router=useRouter()
const store=useTabStore()
const go=(path:string)=>{
   router.push(path)
}
const removeTab=(title:string)=>{
   store.removeTab(title)
}
</script>

<style lang='scss' scoped>
.tab {
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 15px;
}
</style>